<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>接口文档</title>
    <?php self::_loadStatic('jquery.js')?>
    <?php self::_loadStatic('pure.css')?>
    <?php self::_loadStatic('V1.css')?>
</head>

<body>
    <!-- 交互文档区 -->
    <div id="layout">
        <div id="menu">
            <div class="pure-menu pure-menu-open">
                <a class="pure-menu-heading" href="">接口文档 V1.0.0</a>
                <!-- 填充接口 -->
                <ul id="mlist"></ul>
            </div>
        </div>
        <div id="main">
            <div class="pure-form">
                token:<input id="api_token" name="api_token" value="" placeholder="请输入TOKEN" />
            </div>
            <!-- 填充接口 -->
            <ul id="codes">
            </ul>
        </div>
        <!-- 输出预览 -->
        <div class="outputbox">
            <pre id="output"></pre>
        </div>
    </div>

    <!-- 打印文档区 -->
    <div id="print"> </div>

    <script>
        // 修正布局样式
        var height = $('#menu').height();
        var css = { 'height': height, 'overflow': 'auto' };
        $('#main').css(css);
        $('#output').parent().css(css);
        $('#output').css('min-height', height - 20);
        // $('#output').css('min-width', 'max-content');
    </script>

    <?php self::_loadStatic('V1.js')?>

    <script>
        // 接口配置
        var config = <?php echo json_encode($apiItem);?>;
        formBuilder(config);

        //菜单高亮
        $('#mlist').on('click','li a',function(){
            $(this).css('background','#999');
            $(this).parent().siblings().find('a').css('background','');
        });

        if(location.hash){
            $("#mlist li a[href='"+location.hash+"']").click();
            location.href=location.hash;
        }
    </script>
</body>

</html>